<div class=" panel-group" id="menu">
    {{each menuConfig item index}}
    <div class=" panel panel-default" style="border-radius: 0;">
        <div style="cursor: pointer;border-radius: 0;padding: 15px 0;" class=" panel-heading text-center" data-parent="#menu" data-target="#{{item.id}}" data-toggle="collapse">
            <h3 style="font-size: 20px; font-weight: bold;" class="panel-title">{{item.text}}</h3>
        </div>
        <div class=" collapse panel-collapse" id="{{item.id}}">
            <div class="panel-body">
                <ul class="list-group subMenu">
                    {{each item.subMenu subMenuItem subMenuIndex}}
                    <li class=" list-group-item text-center"><a href="{{subMenuItem.href}}" target="mainFrame">{{subMenuItem.text}}</a></li>
                    {{/each}}
                </ul>
            </div>
        </div>
    </div>
    {{/each}}
</div>

<style>
    #menu .panel-body {
        padding: 0px;
    }

    #menu .panel-body .list-group {
        margin: 0;
    }

    #mainFrame {
        width: 100%;
        height: 100%;
    }
    
</style>
<script type="text/javascript">
    $(".subMenu>li>a").click(function(){
        //根据事件先于响应的原则，我们在点击事件上面做一次判断 ，如果这个href没有给值，就不做响应
        var href=$(this).attr("href");
        if(href=="#"||href==undefined||href==null||href==""){
            layer.msg("攻城狮正在完成中...");
            return false;  //不执行后面的响应操作
        }
        else{
            //调用layer插件，产生一个layer加载动画 
            layer.load(0, {shade: false}); 
            //当iFrame里面的网页加载完了以后动画结束
        }
    });
</script>